<template>
  <el-tabs :value="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="(item, index) in tabList"
      :key="index"
      :label="item.label"
      :name="item.name"
    ></el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  props: {
    activeName: {
      type: String,
      require: true,
    },
    tabList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      //   activeName: "second",
    };
  },
  methods: {
    handleClick(tab, event) {
      //   console.log(tab, event);
      this.$emit("EventSelectTab", tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .is-active {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  //   color: #ffffff;
  color: #F87A23;
}
::v-deep .el-tabs__item {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: #2E3F5E;
}
::v-deep .el-tabs__item.is-active{
  font-weight: bold;
  color: #F87A23;
}
::v-deep .el-tabs__active-bar {
  background: #F87A23;
}
::v-deep .el-tabs__item:hover {
  color: #F87A23;
}
</style>